<template>
  <div id="views" class="upload_idcard">
    <div class="uploadArea">
      <p class="title">请上传证件图片</p>
      <p class="imgArea hoverhand" id="imgArea">
        <span class="idcardSrc">
          <img :src="idcardsrc" alt="证件照" :class="imgclass">
        </span>
        <input id="idcard" type="file" ref="idcardInput" @change="selectImgs(0)" accept="image/*" class="hoverhand" title="上传身份证">
      </p>
      <span class="reminder">
        请确保照片和内容完整并清晰可见<br>
        仅支持JPG和PNG图片格式，图片大小小于<span style="color: #f64e4e">2M</span>
      </span>
    </div>
    <button class="yellowbtn" id="nextStep" @click="nextStep">下一步</button>
  </div>
</template>
<script>
    import { relNameVerify , file  } from '../../http/api';

    export default {
        name:'uploadidcard_foreign',
        data(){
            return{
               introduce:'非大陆用户上传证件',
               imgScale: 1.658,/*默认图片宽/高比例*/
               imgclass: 'width100',
               idcardsrc: require('../../common/imgs/idcardicon.png'),/*上传的身份证正面图片地址*/
               query: this.$route.query,//上个页面的参数
               getImgPath1:'',//上传图片得到的返回图片地址
               base64img:'',//base64图片
               inputfile:'',//暂存文件file(上传后端)
            }
        },
        methods:{
            setImgStyle( url ) {
              //设置显示图片样式
             //type判断是正面还是反面，0  1
              let thiz = this;
              let newimg = new Image();
              newimg.src = url;
              thiz.idcardsrc = url;
              thiz.loading();
              newimg.onload = function () {
                thiz.closeLoading();
                if (this.width / this.height > thiz.imgScale) {
                  thiz.imgclass= 'width100';
                } else {
                  thiz.imgclass = 'height100';
                }
              }
            },
            selectImgs(){
                //type判断是正面还是反面，0  1
                let thiz = this;
                let files = this.$refs.idcardInput.files;
                // thiz.inputfile = files[0];

              require('../../common/js/compressImg').compressImg(files[0]).then(res =>{
                thiz.inputfile = res.inputFile;
                thiz.uploadFile();
              });
                return;;
                let fileSize = files[0].size;/*上传文件的大小*/
                if (fileSize > 2 * 1024 * 1024 ) {
                  require('../../common/js/toast').toast('图片不能大于2M ^_^');
                  return;
                }
                let url;
                if (typeof FileReader) {
                  let fileReader = new FileReader();
                  fileReader.onload = function (e) {
                    // thiz.idcardsrc = fileReader.result;
                    // thiz.base64img = fileReader.result;
                    thiz.uploadFile();
                  };
                  fileReader.readAsDataURL(files[0]);
                }
                else if (window.createObjectURL !== undefined || window.URL || window.webkitURL) {
                  if (window.createObjectURL !== undefined) { // basic
                    url = window.createObjectURL(files[0]);
                  } else if (window.URL !== undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(files[0]);
                  } else if (window.webkitURL !== undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(files[0]);
                  }
                  // thiz.idcardsrc = url;
                  // thiz.base64img = url;
                  thiz.uploadFile()
                }
            },
            uploadFile(  ){
              //上传图片
              let thiz = this;
              let formdata = new FormData();
              formdata.append('img', thiz.inputfile);
              file(formdata).then( res => {
                if(res.code == 200){
                  thiz.getImgPath1 = res.data.files.path;
                  thiz.setImgStyle( res.data.files.url );
                }
              }).catch( err => {
                require('../../common/js/toast').toast('上传图片失败');
              })
            },
            nextStep(){
                /*下一步*/
                let thiz = this;
                 let toast = require('../../common/js/toast').toast;
                if( !thiz.getImgPath1 ){
                  toast('请上传证件照');
                  return;
                }
                let params = {
                   name: thiz.query.chinaName,
                   en_name: thiz.query.engName,
                   id_num: thiz.query.idcardNumber,
                   id_photo_1: thiz.getImgPath1,
                   type:2
                 };
                 relNameVerify(params).then(res => {
                   if (res.code == 200) {
                     toast('实名审核提交成功');
                     this.$router.replace({path: '/entrance'});
                   }
                 })
            }
        }
    }
</script>
<style lang="less" type="text/less" scoped>
  .upload_idcard{
    padding:0.42rem 0.3rem;padding-bottom: 0.5rem;
    .uploadArea{
      background: #fff;border-radius: 0.04rem;overflow: hidden;
      .title{font-size: 0.32rem;text-align: center;padding: 0.34rem 0;}
      .imgArea{
        padding:0 1.21rem;font-size: 0;position: relative;
        .idcardSrc{
          border-radius:0.04rem;height: 2.72rem;display: inline-block;width: 100%;position: relative;text-align: center;
          img{
            max-width: 100%;max-height: 100%;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
            position: relative;top:50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);
          }
        }
        input{opacity: 0;position: absolute;z-index: 1;width: calc( 100% - 2.42rem );left: 1.21rem;top:0;height: 100%;}
      }
      .reminder{
        padding:0 0.5rem; color: #BDBFC2;font-size: 0.28rem;text-align: center;display: inline-block;line-height: 170%;padding-top: 0.3rem;padding-bottom: 0.5rem;
      }
    }
  }
  #nextStep{margin-top: 0.42rem}
</style>
